<template>
	<view :style="{background: newColor.color,overflow:'hidden'}" class="pages">
		<view class="logo">
			<view class="img">
				<image
					mode="widthFix"
					src="../../static/img/log.png"
				></image>
			</view>
		</view>
		<!-- 账号密码输入框 -->
		<!-- <view class="form">
			<view class="username"><input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNumber" placeholder-style="color: rgba(255,255,255,0.8);" /></view>
			<view class="password"><input placeholder="请输入密码" maxlength="16" v-model="passwd" password="true" placeholder-style="color: rgba(255,255,255,0.8);" /></view>
			<view class="btn" :style="{color: newColor.color}" @tap="doLogin">登 录</view>
			<view class="res">
				<view @tap="toPage('register')">用户注册</view>
				<view @tap="toPage('resetpasswd')">忘记密码</view>
			</view>
		</view> -->
		<!-- 第三方登录 -->
		<view class="oauth" v-if="isShowOauth">
			<view class="text">— 快速登录 —</view>
			<view class="list">
				<!-- 微信登录小程序端 -->
				<!-- #ifdef MP-WEIXIN -->
				<view v-if="showProvider.weixin" class="icon weixin">
					<button class="bottom" type="primary"   @click="wxGetUserInfo">点</button>
				</view>
				<!-- #endif -->
				<!-- 微信登录公众号端 -->
				<!-- #ifdef H5 -->
				<view v-if="showProvider.weixin" @tap="wxGzhLogin" class="icon weixin"></view>
				<!-- #endif -->
				<!-- <view @tap="oauthLogin('qq')" v-if="showProvider.qq" class="icon qq"></view>
				<view @tap="oauthLogin('sinaweibo')" v-if="showProvider.sinaweibo" class="icon sinaweibo"></view> -->
				<!-- <view @tap="oauthLogin('xiaomi')" v-if="showProvider.xiaomi" class="icon xiaomi"></view> -->
			</view>
			
			
		</view>
	</view>
</template>

<script>
import md5 from '@/common/SDK/md5.min.js';
import { setopenId, setToken, setUserInfo,getRecommend } from '../../static/utils/ahth.js';
export default {
	data() {
		return {
			phoneNumber: '',
			passwd: '',
			isShowOauth: false,
			avatarUrl: '',
			nickName: '',
			codes: '', //微信code
			locations: '',
			openid:'',
			token:'',
			isCanUse: uni.getStorageSync('isCanUse') || 0, //默认为true
			showProvider: {
				weixin: true,
				qq: false,
				sinaweibo: false,
				xiaomi: false
			}
		};
	},
	onShow() {},
	onLoad() {
		//APP显示第三方登录
		//
		this.isShowOauth = true;
		this.getProvider();
		// #ifdef MP-WEIXIN
		this.login();
		// #endif
		// #ifdef H5
		this.wxGzhcode();
		// #endif
	},
	created() {
		this.changeTabBar()
	},
	methods: {
		changeTabBar() {
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: this.newColor.color,
			    animation: {
			        duration: 400,
			        timingFunc: 'easeIn'
			    }
			})
		},
		// 小程序方法
		wxGetUserInfo() {
			//微信授权
			let _this = this;
			uni.getUserProfile({
				desc: 'weixin',
				success: function(infoRes) {
					_this.nickName = infoRes.userInfo.nickName; //昵称
					_this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
					try {
						uni.setStorageSync('isCanUse', 1); //记录是否第一次授权  false:表示不是第一次授权
					} catch (e) {
						console.log('缓存失败');
					}
					uni.showLoading({
						title: '登录中...'
					});
					console.log(infoRes);
					_this.getUserInfos();
				},
				fail(res) {}
			});
		},
		login() {
			let _this = this;
			// uni.showLoading({
			// 	title: '登录中...'
			// });
			// 1.wx获取登录用户code
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log('这是用户的code', loginRes);
					let code = loginRes.code;
					if (_this.isCanUse == 1) {
						//非第一次授权获取用户信息
						
						uni.getUserProfile({
							desc: 'weixin',
							success: function(infoRes) {
								//获取用户信息后向调用信息更新方法
								_this.nickName = infoRes.userInfo.nickName; //昵称
								_this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
								// _this.getUserInfos(); //调用更新信息方法  不进行自动登录
							}
						});
					}
					//2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
					_this.request('user/wxLogin', {
							code: code
						})
						.then(res => {
							console.log(res)
							if (res.code == 200) {
								//用户未注册
								_this.openid = res.data.openid
								uni.hideLoading();
							}
						});
				}
			});
		},
		getUserInfos() {//
			this.request('user/getToken',{
				pid: getRecommend() || '',
				user_id: '',
				open_id: this.openid || '',
				// user_id: '25',
				// open_id: 'o_4yg5R0UM3C3GRpLo0KW2EPyVjc',
				username: this.nickName,
				head_img: this.avatarUrl
			}).then(res=>{
				console.log(res)
				setToken(res.data.token)
				uni.hideLoading()
				uni.showToast({
					title: '登录成功'
				});
				setTimeout(()=>{
					// this.$Router.pushTab({path:'/pages/tabBar/user/user'})
					this.$Router.back(1)
				},1500)
			})
			
		},
		// 公众号登录方法
		wxGzhcode() {
			//公众号获取code方法
			this.request('/api/index/wxCode', {
				redirect_uri: 'http://zy.soft.haoyangsoft.com/',  //这里的回调地址填authorization 这个页面 当做中转页
				scope: 'snsapi_base'
			}).then(res => {
				console.log(res);
				if (res.data.code == 0) {
					this.locations = res.data.data;
					// location.href = res.data.data
				}
			});
		},
		wxGzhLogin() {
			//公众号登录
			if (this.codes == '') {
				uni.showLoading({
					title: '微信授权...'
				});
				location.href = this.locations;
			}
		},
		getProvider() {
			//获取第三方登录服务
			uni.getProvider({
				service: 'oauth',
				success: res => {
					let len = res.provider.length;
					for (let i = 0; i < len; i++) {
						//有服务才显示按钮图标
						this.showProvider[res.provider[i]] = true;
					}
					if (res.provider.length == 0) {
						// this.isShowOauth=false;
					}
				}
			});
		},
		toPage(page) {
			uni.hideKeyboard();
			this.$Router.push({path:'/pages/login/'+page})
		},
		doLogin() {
			//手机号登录  待完善
			uni.hideKeyboard();
			//验证手机号码
			if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber)) {
				uni.showToast({ title: '请填写正确手机号码', icon: 'none' });
				return false;
			}
			if(this.passwd == ''){
				uni.showToast({title: '密码不能为空',icon:"none"});
				return false; 
			}
			uni.showLoading({
				title: '登录中...'
			});
			this.onlogin()
		},
		onlogin(){ //手机号密码进行登录
			this.request('user/passwordLogin',{
				mobile: this.phoneNumber,
				password: this.passwd
			},'post').then(res=>{
				uni.hideLoading()
				console.log(res)
				if(res.msg=="登陆成功!"){
					this.ongetToken(res.data.user_id)
				}else if(res.msg=="密码错误!"){
					uni.showToast({
						title: '密码错误',
						icon:'none'
					});
				}
			})
		},
		ongetToken(uid){ //手机号密码进行登录
			this.request('user/getToken',{
				pid: getRecommend() || '',
				user_id: uid || ''
			}).then(res=>{
				console.log(res)
				setToken(res.data.token)
				uni.showToast({
					title: '登录成功'
				});
				setTimeout(()=>{
					this.$Router.pushTab({path:'/pages/tabBar/user/user'})
				},1500)
			})
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../static/css/login.scss';
.pages{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
}
.form {
	.res {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		color: rgba($color: #ffffff, $alpha: 0.8);
	}
}
.oauth {
	@media all and (max-height: 150vw) {
		display: none;
	}
	position: absolute;
	bottom: 50upx;
	width: 100%;
	.text {
		width: 100%;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba($color: #ffffff, $alpha: 0.8);
		font-size: 28upx;
	}
	.list {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20upx 0;
		.icon {
			font-size: 80upx;
			margin: 0 30upx;
		}
	}
}
.weixin {
	position: relative;

	.bottom {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}
}
</style>
